<template>
    <div class="content">
        <ul>
            <li v-for="(item,index) in $store.state.list" :key="index">
                <input type="checkbox" v-model="item.select" :checked="item.select">
                <span class="span_text">{{ item.text }}</span>
                <button @click="onDeleteItem(index)" class="delete_btn">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "compContent",
    methods:{
        onDeleteItem(index){
            this.$store.commit("deleteItem", index)
        }
    }
}
</script>

<style scoped lang="scss">

.content {
    margin: 10px auto;

    li {
        padding: 5px;
        border: 1px solid #cccccc;
        border-bottom: none;

        &:last-child {
            border-bottom: 1px solid #cccccc;
        }

        &:hover {
            background-color: #eeeeee;
            .delete_btn{
                display: block;
            }
        }

        .span_text {
            margin-left: 4px;
            font-weight: bold;
        }

        .delete_btn {
            display: none;
            float: right;
            padding: 2px 4px;
            background-color: #e54f4f;
            color: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 4px;
        }
    }
}
</style>